<template>
    <div>
        <el-tabs v-model="currentPrintTab" class="center-tabs" >
            <el-tab-pane label="差旅报销单" name="main" />
            <el-tab-pane label="报销明细" name="mx" />
        </el-tabs>
        <el-scrollbar class="right-scrollbar">
            <el-form v-show="currentPrintTab==='main'"> 
            <div id="mainPrintDiv">
                <div style="width:270px;height:22px;font-size:18px;font-family:'宋体';margin:0 auto;">中国软件与技术服务股份有限公司</div>
                <div style="width:170px;height:30px;font-size:18px;font-family:'宋体';margin:0 auto;">差  旅  费  报  销  单</div>
                <table style="width:95%;margin:0 auto;" cellspacing="0" cellpadding="0" >
                    <tr>
                        <td colspan="2" class="main-print-col12 textCenterPrint">部门</td>
                        <td colspan="6" class="main-print-col12">{{ printBasicData.deptName }}</td>
                        <td colspan="8" class="main-print-col12">{{ printBasicData.expenseTimeYStr }}    年    {{ printBasicData.expenseTimeMStr }}    月    {{ printBasicData.expenseTimeDStr }}    日</td>
                    </tr>
                    <tr v-bind="printBasicData">
                        <td colspan="3" class="main-print-col12 textCenterPrint main-print-border-top-left">出差人</td>
                        <td colspan="7" class="main-print-col12 main-print-border-top-left">&nbsp;{{ printBasicData.expenseName }} </td>
                        <td class="main-print-col12 textCenterPrint main-print-border-top-left">出差事由</td>
                        <td colspan="5" class="main-print-col12 main-print-border-top-left main-print-border-right"></td>
                    </tr>
                    <tr>
                        <td colspan="4" class="main-print-col12 textCenterPrint  main-print-border-top-left">出    发</td>
                        <td colspan="4" class="main-print-col12 textCenterPrint main-print-border-top-left">到    达</td>
                        <td rowspan="2" class="main-print-col12 textCenterPrint main-print-border-top-left" width="6%">交通<br />工具</td>
                        <td colspan="2" class="main-print-col12 textCenterPrint main-print-border-top-left">交  通  费</td>
                        <td colspan="2" class="main-print-col12 textCenterPrint main-print-border-top-left">出差补贴</td>
                        <td colspan="3" class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-right">其   他   费   用</td>
                    </tr>
                    <tr>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" width="3%">月</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" width="3%">日</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" width="3%">时</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" width="8%">地点</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" width="3%">月</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" width="3%">日</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" width="3%">时</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" width="8%">地点</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" >单据张数</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" >金额</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" >天数</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" >金额</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" >项目</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" >单据张数</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-right">金额</td>
                    </tr>
                    <tr v-for="(item, index) in printMainList" :key="index">
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.startTimeMstr}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.startTimeDstr}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.startTimeHstr}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.beginPlace}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.arriveTimeMstr}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.arriveTimeDstr}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.arriveTimeHstr}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.endPlace}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.transportName}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.invoiceNum}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" v-if="item.expenseMoney">￥{{formatFloat2(item.expenseMoney)}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" v-else></td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" v-if="item.days != 0">{{item.days}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" v-else></td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" v-if="item.days != 0">￥{{formatFloat2(item.btMoney)}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" v-else></td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{item.otherCostName}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" v-if="item.otherInvoiceNum != 0">{{item.otherInvoiceNum}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left" v-else></td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-right" v-if="item.otherExpenseMoney">￥{{formatFloat2(item.otherExpenseMoney)}}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-right" v-else></td>
                   </tr>
                    
                    <tr>
                        <td  colspan="9" class="main-print-col12 textCenterPrint main-print-border-top-left">合        计</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{ printBasicData.hjJtdjNum }}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">￥{{ formatFloat2(printBasicData.hjJtdjMoney) }}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{ printBasicData.hjCcNum }}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">￥{{ formatFloat2(printBasicData.hjCcMoney) }}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">合计</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">{{ printBasicData.hjQtNum }}</td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-right">￥{{ formatFloat2(printBasicData.hjQtMoney) }}</td>
                    </tr>
                    <tr>
                        <td  colspan="2" rowspan="2" class="main-print-col12 textCenterPrint main-print-border-top-left  main-print-border-bottom">报销<br />总额</td>
                        <td  colspan="2" rowspan="2" class="main-print-col12 textCenterPrint main-print-border-top-left  main-print-border-bottom">人民币<br />(大写)</td>
                        <td  colspan="6" rowspan="2" class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-bottom">{{ printBasicData.totalAmountUpper }}({{ printBasicData.totalAmount }})</td>
                        <td  rowspan="2" class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-bottom">预借旅费</td>
                        <td  rowspan="2" colspan="2" class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-bottom"></td>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left">补领金额</td>
                        <td  colspan="2" class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-right"></td>
                    </tr>
                    <tr>
                        <td  class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-bottom">退还金额</td>
                        <td  colspan="2" class="main-print-col12 textCenterPrint main-print-border-top-left main-print-border-right main-print-border-bottom"></td>
                    </tr>
                    <tr>
                        <td  colspan="2" class="main-print-col12">主管</td>
                        <td  class="main-print-col12"></td>
                        <td  class="main-print-col12"></td>
                        <td  class="main-print-col12"></td>
                        <td  class="main-print-col12"></td>
                        <td  class="main-print-col12"></td>
                        <td  class="main-print-col12"></td>
                        <td  class="main-print-col12">审核</td>
                        <td  class="main-print-col12"></td>
                        <td  class="main-print-col12 textRightPrint">出纳</td>
                        <td  class="main-print-col12"></td>
                        <td  class="main-print-col12"></td>
                        <td  class="main-print-col12 textRightPrint">领款人</td>
                        <td  class="main-print-col12"></td>
                        <td  class="main-print-col12"></td>
                    </tr>
                </table>
                
            </div>
            </el-form>
            <el-form v-show="currentPrintTab==='mx'"> 
            <div id="mxPrintDiv">
                <div style="width:330px;height:40px;font-size:23px;font-family:'宋体';font-weight:bold;margin:0 auto;letter-spacing:1px;">数字城市事业本部报销明细表</div>
                <table style="width:96%;margin:0 auto;" cellspacing="0" cellpadding="0" border="1">
                <tr v-bind="printBasicData">
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left" colspan="2">报销人归属部门：</td>
                    <td class="main-print-col16 textLeftPrint main-print-border-top-left"  colspan="2" >{{ printBasicData.deptName}}</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left">报销人：</td>
                    <td class="main-print-col16 textLeftPrint main-print-border-top-left main-print-border-right">{{ printBasicData.expenseName }}</td>
                </tr>
                <tr>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left "  colspan="2">项目名称：</td>
                    <td class="main-print-col16 textLeftPrint main-print-border-top-left"  colspan="2" style="font-size:12px">{{ printBasicData.itemName }}</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left">项目财务编号：</td>
                    <td class="main-print-col16 textLeftPrint main-print-border-top-left main-print-border-right"><!--{{ printBasicData.productFinanceNoPrint }}--></td>
                </tr>
                <tr>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left "  colspan="2">项目归属部门：</td>
                    <td class="main-print-col16 textLeftPrint main-print-border-top-left"  colspan="2">{{ printBasicData.itemDeptName }}</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left">报销时间：</td>
                    <td class="main-print-col16 textLeftPrint main-print-border-top-left main-print-border-right">{{ printBasicData.cashTimeStartStr }}至{{ printBasicData.cashTimeEndStr }}</td>
                </tr>
                <tr>
                    <th class="main-print-col16 textCenterPrint main-print-border-top-left " width="5%">序号</th>
                    <th class="main-print-col16 textCenterPrint main-print-border-top-left" width="15%">报销内容</th>
                    <th class="main-print-col16 textCenterPrint main-print-border-top-left" width="18%">发生时间</th>
                    <th class="main-print-col16 textCenterPrint main-print-border-top-left" width="12%" >单据张数</th>
                    <th class="main-print-col16 textCenterPrint main-print-border-top-left" width="16%">金额</th>
                    <th class="main-print-col16 textCenterPrint main-print-border-top-left main-print-border-right" width="26%">事由</th>
                </tr>
                <tr v-for="(item, index) in printDetailList" :key="index">
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left ">{{index+1}}</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left">{{item.expenseContent}}</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left">{{item.fssj}}</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left" >{{item.invoiceNum}}</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left" v-if="item.expenseMoney">{{formatFloat2(item.expenseMoney)}}</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left" v-else></td>
                    <td class="main-print-col16 textLeftPrint main-print-border-top-left main-print-border-right">{{item.expenseRemark}}</td>
                </tr>
                <tr v-bind="printBasicData">
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left main-print-border-bottom" colspan="2">合&nbsp;计：</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left main-print-border-bottom"></td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left main-print-border-bottom">{{printBasicData.mxHjdjNum}}</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left main-print-border-bottom">{{formatFloat2(printBasicData.mxHjMoney)}}</td>
                    <td class="main-print-col16 textCenterPrint main-print-border-top-left main-print-border-right main-print-border-bottom"></td>
                </tr>
                </table>
                <div style="width:96%;margin:0 auto;">
                <div class="printBottomDiv">项目经理签字：</div>
                <div class="printBottomDiv">二级部门经理签字：</div>  
                </div>
            </div>
            </el-form>
        </el-scrollbar>
    </div>
</template>

<script>
import { getTravelMainPrint,getTravelPrintList,getTravelPrintMxList } from '@/api/product/travel';
import { timeLength } from '@/utils/index';

export default {
    name:"travelPrint",
    props:{
        currentPrintTab:{
            type:String
        },
        propTravelId:{
            type: Number,
            default:1,
            required: true
        },
    },
    data(){
        return {
            httpUrl:process.env.VUE_APP_BASE_API,
            printBasicData:{},
            printDetailList:[],
            printMainList:[]
            
        }
    },
    created() {
        this.printTravel(this.propTravelId);
    },
    watch: {
        propTravelId:function(val) {
            this.printTravel(val);
        }
    },
    methods: {
        printTravel(travelId){
            this.getBasicPrintData(travelId);
           
        },
        getBasicPrintData(id) {
            getTravelMainPrint(id).then(response => {
                this.printBasicData = response.data;
                this.getItemMainPrintList(id);   
                this.getItemPrintList(id);
            });
        },
        getItemMainPrintList(id){
            getTravelPrintList(id).then(response => {
                let rows = response.rows; 
                let hjJtdjNum = 0;//合计交通费单据张数
                let hjJtdjMoney = 0.00;//合计交通费金额
                let hjCcNum = 0;//合计出差天数
                let hjCcMoney = 0.00;//合计出差补助金额
                for(let i=0;i<rows.length;i++){
                    if(rows[i].travelItemId){
                        hjJtdjNum += rows[i].invoiceNum;
                        hjJtdjMoney += rows[i].expenseMoney;
                        hjCcNum += rows[i].days;
                        hjCcMoney += rows[i].btMoney;
                    }
                }
                this.printBasicData.hjJtdjNum = hjJtdjNum;
                this.printBasicData.hjJtdjMoney = hjJtdjMoney;
                this.printBasicData.hjCcNum = hjCcNum;
                this.printBasicData.hjCcMoney = hjCcMoney;
                this.printMainList = rows;
            });
        },
        getItemPrintList(id){
            getTravelPrintMxList(id).then(response => {
                let rows = response.rows; 
                let mxHjdjNum = 0;//报销明细合计单据数量
                let mxHjMoney = 0.00;//报销明细合计金额
                let hjQtNum = 0;//合计其他单据张数
                let hjQtMoney = 0.00;//合计其他金额
                for(let i=0;i<rows.length;i++){
                    mxHjdjNum += rows[i].invoiceNum;
                    mxHjMoney += rows[i].expenseMoney;
                    if(rows[i].travelType != '1'){
                        hjQtNum += rows[i].invoiceNum;
                        hjQtMoney += rows[i].expenseMoney;
                    }
                }
                this.printBasicData.mxHjdjNum = mxHjdjNum;
                this.printBasicData.mxHjMoney = mxHjMoney;
                this.printBasicData.hjQtNum = hjQtNum;
                this.printBasicData.hjQtMoney = hjQtMoney;
                const oldlentgh = rows.length;
                if(rows.length<6){
                    for(let i=1;i<6-oldlentgh;i++){
                        rows.push({});
                    }
                }
                this.printDetailList = rows;

            });
        },
        
        
        myPrint(){
            //此样式同页面style里样式一致 start
            let cssText='<style type="text/css" >';
            cssText+='.main-print-border-top-left{';
            cssText+='border-top: 1px solid black;';
            cssText+='border-left: 1px solid black;';
            cssText+='}';
            cssText+='.main-print-border-bottom{';
            cssText+='  border-bottom: 1px solid black;';
            cssText+='}';
            cssText+='.main-print-border-right{';
            cssText+='  border-right: 1px solid black;';
            cssText+='}';
             cssText+='.main-print-col10{';
            cssText+='  height:30px;';
            cssText+='  font-size:10px;';
            cssText+='  font-family:"宋体";';
            cssText+='  line-height:30px;';
            cssText+='}';
            cssText+='.main-print-col12{';
            cssText+='  height:30px;';
            cssText+='  font-size:12px;';
            cssText+='  font-family:"宋体";';
            cssText+='  line-height:30px;';
            cssText+='}';
            cssText+='.main-print-col16{';
            cssText+='  height:30px;';
            cssText+='  font-size:16px;';
            cssText+=' font-family:"宋体";';
            cssText+='  line-height:30px;';
            cssText+='}';
            cssText+='.textCenterPrint {';
            cssText+='  text-align:center;';
            cssText+='}';
            cssText+='.textLeftPrint {';
            cssText+='  padding-left:3px;';
            cssText+='}';
            cssText+='.textRightPrint {';
            cssText+='  text-align:right;';
            cssText+='}';
            cssText+='.printBottomDiv{';
            cssText+='  width:50%;';
            cssText+='  height:60px;';
            cssText+='  float:left;';
            cssText+='  line-height: 80px;';
            cssText+='  font-family:"宋体";';
            cssText+='  font-size:16px;';
            cssText+='}';
            cssText+='.printBottomMainDiv{';
            cssText+='  height:60px;';
            cssText+='  float:left;';
            cssText+='  line-height: 50px;';
            cssText+='  font-family:"宋体";';
            cssText+='  font-size:12px;}';
            if(this.currentPrintTab == 'jb'){
                cssText += "@page {size:landscape;}";
                cssText+='</style>';
            }else{
                cssText+='</style>';
            }
            //此样式同页面style里样式一致 end
            if(this.currentPrintTab == 'main'){
                this.printMain(cssText);
            }else if(this.currentPrintTab == 'mx'){
                this.printMx(cssText);
            }
        },
        printMain(cssText){
            //打印主信息start
            let printMainHtml =  "<div style=\"width:100%;height:120px;\"></div>"+window.document.getElementById("mainPrintDiv").innerHTML ;
            var mainWindow = window.open("","main","height=600");
            mainWindow.document.write(cssText+printMainHtml); 
            mainWindow.document.close();
            mainWindow.focus();
            mainWindow.print();
            mainWindow.close();
            //打印主信息end
        },
        printMx(cssText){ 
            //打印明细start
            let printMxHtml = "<div style=\"width:100%;height:140px;\"></div>"+window.document.getElementById("mxPrintDiv").innerHTML;
            var mxWindow = window.open("","mx","height=600"); 
            mxWindow.document.write(cssText+printMxHtml); 
            mxWindow.document.close();
            mxWindow.focus();
            mxWindow.print();
            mxWindow.close();
            //打印明细end
        }
    }
}
</script>

<style>
  .main-print-border-top-left{
    border-top: 1px solid black;
    border-left: 1px solid black;
  }
  .main-print-border-bottom{
    border-bottom: 1px solid black;
  }
  .main-print-border-right{
    border-right: 1px solid black;
  }
  .main-print-col10{
    height:30px;
    font-size:10px;
    font-family:"宋体";
    line-height:30px;
  }
  .main-print-col12{
    height:30px;
    font-size:12px;
    font-family:"宋体";
    line-height:30px;
  }
  .main-print-col16{
    height:30px;
    font-size:16px;
    font-family:"宋体";
    line-height:30px;
  }
  .textCenterPrint {
    text-align:center;
  }
  .textLeftPrint {
    padding-left:3px;
  }
  .textRightPrint {
    text-align:right;
  }
  .printBottomDiv{
    width:50%;
    height:60px;
    float:left;
    line-height: 80px;
    font-family:"宋体";
    font-size:16px;
  }
  .printBottomMainDiv{
    height:60px;
    float:left;
    line-height: 50px;
    font-family:"宋体";
    font-size:12px;
  }
</style>